<template>
  <div class="awards_wrapper">
    <div class="awards_inner">
      <div class="awards_content">
        <div class="kicker_wrapper">
          <img
            src=""
            alt="awards icon" class="kicker_icon" />
          <div class="kicker_text">Our Awards</div>
        </div>
        <h6 :class="['awards_title', locale === 'zh' ? 'title-zh' : 'title-en']"> {{ $t("fifthContentAwardsTitle1") }}
        </h6>
        <!-- <h6 class="awards_title"> {{ $t("fifthContentAwardsTitle1") }}</h6> -->
        <p class="awards_text">
          {{ $t("fifthContentAwardsText1") }}
        </p>
      </div>
      <div class="awards_track">
        <div class="awards_track_inner">
          <div class="award_wrapper">
            <div class="img_wrapper">
              <img src="/src/assets/fifi_icon1.webp" alt="" />
            </div>
            <h6 class="award_title">{{ $t("fifthContentAwardsTitle2") }}</h6>
            <p class="award_text">
              {{ $t("fifthContentAwardsText2") }}
            </p>
          </div>
          <div class="award_wrapper">
            <div class="img_wrapper">
              <img src="/src/assets/fifi_icon2.webp" alt="" />
            </div>
            <h6 class="award_title">{{ $t("fifthContentAwardsTitle3") }}</h6>
            <p class="award_text">
              {{ $t("fifthContentAwardsText3") }}
            </p>
          </div>

        </div>
      </div>
      <div class="awards_arrows">
        <svg viewBox="0 0 17 6" fill="#b7c6c8" xmlns="http://www.w3.org/2000/svg" class="awards_arrows_svg">
          <path
            d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
          </path>
        </svg>
        <svg viewBox="0 0 17 6" fill="#b7c6c8" xmlns="http://www.w3.org/2000/svg" class="awards_arrows_svg">
          <path
            d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
          </path>
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';

const { locale } = useI18n();
computed(() => locale.value);
</script>

<style lang="less" scoped>
.awards_wrapper {
  display: grid;
  place-items: center;
  background-color: rgb(0, 32, 37);
  width: 100%;
  border-radius: 0px 0px 30px 30px;

  @media screen and (min-width: 1025px) {
    border-radius: 0vw 0vw 2.083vw 2.083vw;
  }

  .awards_inner {
    width: 100%;
    max-width: 1440px;
    display: flex;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    transform: scale(1);
    padding: 100px 0px 240px;
    gap: 70px;

    @media screen and (min-width: 1025px) {
      padding: 6.944vw 0px 16.667vw;
      gap: 4.861vw;
    }

    .awards_content {
      display: flex;
      flex-direction: column;
      -webkit-box-align: center;
      align-items: center;
      width: 100%;
      gap: 30px;

      @media screen and (min-width: 1025px) {
        gap: 2.083vw;
      }

      .kicker_wrapper {
        display: flex;
        flex-direction: row;
        -webkit-box-align: center;
        align-items: center;
        gap: 1.042vw;

        .kicker_icon {
          overflow-clip-margin: content-box;
          overflow: clip;
          max-block-size: 100%;
          max-inline-size: 100%;
        }

        .kicker_text {
          font-family: Gellix;
          font-weight: 300;
          font-size: 12px;
          letter-spacing: 0.35em;
          line-height: 105%;
          text-transform: uppercase;
          color: rgb(183, 198, 201);

          @media screen and (min-width: 1025px) {
            font-size: 0.833vw;
          }
        }
      }

      .awards_title {
        color: rgb(255, 255, 250);
        font-family: Gellix;
        font-weight: 500;
        font-size: 120px;
        letter-spacing: -0.04em;
        text-align: center;
        line-height: 100%;
        width: 750px;

        &.title-zh {
          line-height: 120%;
          letter-spacing: 0.1em;
          // font-size: 110px;
        }

        @media screen and (min-width: 1025px) {
          font-size: 8.3vw;
          width: 54vw;
        }
      }

      .awards_text {
        font-family: Gellix;
        font-weight: 400;
        font-size: 22px;
        letter-spacing: 0px;
        line-height: 130%;
        color: rgb(255, 255, 250);
        text-align: center;
        width: 550px;

        @media screen and (min-width: 1025px) {
          font-size: 1.528vw;
          width: 38.194vw;
        }
      }
    }

    .awards_track {
      overflow-x: scroll;
      display: flex;
      position: relative;
      scrollbar-width: none;
      width: 1440px;
      justify-content: center;

      @media screen and (min-width: 1025px) {
        width: 100vw;
      }

      .awards_track_inner {
        position: relative;
        display: flex;
        width: fit-content;
        gap: 24px;
        padding: 0px 24px;
        justify-content: center;

        @media screen and (min-width: 1025px) {
          gap: 1.667vw;
          padding: 0px 1.667vw;
        }

        .award_wrapper {
          display: flex;
          flex-direction: column;
          border: 1px solid rgb(36, 67, 72);
          padding: 20px 25px 20px 20px;
          border-radius: 8px;
          width: 400px;
          min-height: 300px;

          @media screen and (min-width: 1025px) {
            padding: 1.389vw 1.736vw 1.389vw 1.389vw;
            border-radius: 0.556vw;
            width: 27.778vw;
            min-height: 20.833vw;
          }

          .img_wrapper {
            display: inline-block;
            vertical-align: top;
            position: relative;
            overflow: hidden;
            width: 45px;
            height: 45px;
            margin-bottom: 20px;

            @media screen and (min-width: 1025px) {
              width: 3.125vw;
              height: 3.125vw;
              margin-bottom: 1.389vw;
            }

            & img {
              bottom: 0;
              height: 100%;
              left: 0;
              margin: 0;
              max-width: none;
              padding: 0;
              position: absolute;
              right: 0;
              top: 0;
              width: 100%;
              object-fit: cover;
              max-block-size: 100%;
              max-inline-size: 100%;
            }
          }

          .award_title {
            font-family: Gellix;
            font-weight: 600;
            font-size: 18px;
            letter-spacing: -0.01em;
            line-height: 145%;
            color: rgb(255, 255, 250);
            margin-bottom: 30px;

            @media screen and (min-width: 1025px) {
              font-size: 1.25vw;
              margin-bottom: 2.083vw;
            }
          }

          .award_text {
            font-family: Gellix;
            font-weight: 400;
            font-size: 12px;
            letter-spacing: 0px;
            line-height: 130%;
            color: rgb(183, 198, 201);

            @media screen and (min-width: 1025px) {
              font-size: 0.833vw;
            }
          }
        }
      }
    }

    .awards_arrows {
      display: none;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      gap: 15px;

      .awards_arrows_svg {
        height: auto;
        cursor: pointer;
        width: 24px;
      }

      .awards_arrows_svg:first-of-type {
        transform: scaleX(-1);
      }
    }
  }


}

@media screen and (max-width: 500px) {
  .awards_wrapper {
    // display: block;
    // padding: 20px;
    // border-radius: 0px;
    border-radius: 0vw 0vw 8vw 8vw;

    .awards_inner {
      padding: 50px 0 120px;

      .awards_content {
        .awards_title {
          font-size: 12.8vw;
          width: 100%;
          font-weight: 500;
          letter-spacing: -0.03em;
          line-height: 110%;
        }

        .awards_text {
          display: none;
        }
      }

      .awards_track {
        width: 100vw;
        justify-content: left;
        .awards_track_inner {
          gap: 13.333vw;
          padding: 0px 13.333vw;
          justify-content: flex-start;

          .award_wrapper {
            width: 73.067vw;
            min-height: 99.467vw;
            padding: 5.333vw 6.667vw 5.333vw 5.333vw;
            border-radius: 2.133vw;

            .img_wrapper {
              width: 12vw;
              height: 12vw;
              margin-bottom: 5.333vw;
            }

            .award_title {
              margin-bottom: 8vw;
              font-size: 4.8vw;
            }

            .award_text {
              font-size: 3.2vw;
            }
          }
        }
      }

      .awards_arrows {
        display: flex;
        gap: 4vw;

        .awards_arrows_svg {
          width: 6.4vw;
        }
      }
    }


  }
}

@media screen and (min-width: 501px) and (max-width: 1024px) {

  .awards_wrapper {
    display: block;
    padding: 20px;
    border-radius: 0px;

    .awards_inner {
      padding: 50px 0 120px;

      .awards_content {
        .awards_title {
          width: 73.242vw;
          font-size: 11.719vw;
        }

        .awards_text {
          width: 53.711vw;
          font-size: 2.148vw;
        }
      }

      .awards_track {
        width: 100vw;

        .awards_track_inner {
          gap: 2.344vw;
          padding: 0px 2.344vw;

          .award_wrapper {
            padding: 1.953vw 2.441vw 1.953vw 1.953vw;
            border-radius: 0.781vw;
            width: 39.063vw;
            min-height: 29.297vw;

            .img_wrapper {
              width: 4.395vw;
              height: 4.395vw;
              margin-bottom: 1.953vw;
            }

            .award_title {
              margin-bottom: 2.93vw;
              font-size: 1.758vw;
            }

            .award_text {
              font-size: 1.172vw;
            }
          }

        }
      }

      .awards_arrows {
        display: none;
      }
    }
  }
}
</style>
